<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :before-close="handleClose"
    :destroy-on-close="true"
    :modal="modal"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      size="small"
    >
      <!-- 动态渲染表单字段 -->
      <el-form-item
        v-for="(field, index) in fields"
        :key="index"
        :label="field.label"
        :prop="field.prop"
        :required="field.required"
      >
        <!-- 输入框 -->
        <el-input
          v-if="field.type === 'input'"
          v-model="formData[field.prop]"
          :placeholder="'请输入' + field.label"
          :maxlength="field.maxlength || 200"
          :disabled="field.disabled"
        ></el-input>
        
        <!-- 文本域 -->
        <el-input
          v-if="field.type === 'textarea'"
          v-model="formData[field.prop]"
          :placeholder="'请输入' + field.label"
          :rows="field.rows || 4"
          type="textarea"
          :disabled="field.disabled"
        ></el-input>
        
        <!-- 下拉选择 -->
        <el-select
          v-if="field.type === 'select'"
          v-model="formData[field.prop]"
          :placeholder="'请选择' + field.label"
          :disabled="field.disabled"
          clearable
        >
          <el-option
            v-for="(option, optIndex) in field.options"
            :key="optIndex"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>
        
        <!-- 日期选择器 -->
        <el-date-picker
          v-if="field.type === 'date'"
          v-model="formData[field.prop]"
          :placeholder="'请选择' + field.label"
          :disabled="field.disabled"
          type="date"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        
        <!-- 日期时间选择器 -->
        <el-date-picker
          v-if="field.type === 'datetime'"
          v-model="formData[field.prop]"
          :placeholder="'请选择' + field.label"
          :disabled="field.disabled"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
        
        <!-- 开关 -->
        <el-switch
          v-if="field.type === 'switch'"
          v-model="formData[field.prop]"
          :disabled="field.disabled"
        ></el-switch>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'FormDialog',
  props: {
    title: {
      type: String,
      default: '表单'
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '60%'
    },
    // 表单字段配置
    fields: {
      type: Array,
      default: () => []
    },
    // 表单初始数据
    initialData: {
      type: Object,
      default: () => ({})
    },
    // 表单验证规则
    rules: {
      type: Object,
      default: () => ({})
    },
    modal: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formData: {}
    }
  },
  watch: {
    // 当初始数据变化时更新表单
    initialData: {
      handler(val) {
        this.formData = { ...val }
      },
      immediate: true
    },
    // 当弹窗关闭时重置表单
    visible(val) {
      if (!val) {
        this.$nextTick(() => {
          this.$refs.formRef?.resetFields()
        })
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    async handleSubmit() {
      try {
        // 表单验证
        await this.$refs.formRef.validate()
        // 验证通过，提交数据
        this.$emit('submit', this.formData)
        this.handleClose()
      } catch (error) {
        // 验证失败，不提交
        console.log('表单验证失败', error)
      }
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
